<template>
  <div class="selectType">
    <div class="contentBox">
      <el-page-header :icon="null" @back="goBack">
        <template #title>
          <el-icon><ArrowLeftBold /></el-icon>
          <span class="returnClass">返回</span>
        </template>
        <template #content>
        </template>
      </el-page-header>
      <div class="selectBox">
        <div class="item" v-for="(item,index) in selectArr" :key="index" :style="{backgroundColor: item.color}" @click="jump2Test(item)">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      personType: '',
      type: 'add',
      formInfo: {},
      numSurplus: {},
      WAIMS_TOKEN: '',
      selectArr: [
        {
          name: '筛查版',
          url: '/enterInformation',
          color: '#fbacad',
          type: 0
        },
        {
          name: '深度评估版',
          url: '/enterInformation',
          color: '#3786f7',
          type: 1
        }
      ]
    }
  },
  mounted() {
    if(localStorage.getItem('WAIMS_TOKEN') && localStorage.getItem('WAIMS_TOKEN') !== '') {
      this.WAIMS_TOKEN = localStorage.getItem('WAIMS_TOKEN')
      this.type = this.$route.query.type ? this.$route.query.type : 'add'
      this.formInfo = this.$route.query.formInfo ? JSON.parse(this.$route.query.formInfo) : {}
      this.formInfo.classification = this.formInfo.classification.toString()
      this.formInfo.sex = this.formInfo.sex.toString()
      this.formInfo.health = this.formInfo.health.toString()
      this.numSurplus = this.$route.query.numSurplus ? JSON.parse(this.$route.query.numSurplus) : {}
    } else {
      // alert('没有获取到登录token')
      // 清除localStorage 跳出网站
      // 清除与登录信息相关的local storage
      localStorage.removeItem("isLogin");
      localStorage.removeItem("baseInfo");
      localStorage.removeItem("proInfo");
      localStorage.removeItem("proUserFile");
      localStorage.removeItem("generalUserInfo");
      localStorage.removeItem("testId");
      // 清除session storage
      sessionStorage.clear();
      // 删除保存在cookie里的token
      document.cookie = "WAIMS_TOKEN" + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
      if(window.location.href.indexOf('https://xn--15t241ax9eqv8a.xn--fiqs8s/psych') > -1 ) {
        window.location.href = "https://xn--15t241ax9eqv8a.xn--fiqs8s/"
      } else if (window.location.href.indexOf('https://psychological-assessment.com/psych') > -1 ) {
        // 测试环境
        window.location.href = 'https://psychological-assessment.com/'
      } else {
        // 正式环境
        window.location.href = 'https://psychometrics-home.com/'
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/testList'
      })
    },
    jump2Test(item) {
      if(this.type == 'haveInfo4add') {
        this.$router.push({
          path: '/selection',
          query: {
            selectType: item.type
          }
        })
      } else if(this.type == 'add')  {
        if(item.name == '筛查版' && this.numSurplus.lowSurplus == 0) {
          this.$message({
            message: '剩余例数不足'
          })
          return
        }
        if(item.name == '深度评估版' && this.numSurplus.heightSurplus == 0) {
          this.$message({
            message: '剩余例数不足'
          })
          return
        }
        this.$router.push({
          path: item.url,
          query: {
            selectType: item.type,
            type: 'add',
            formInfo: JSON.stringify(this.formInfo)
          }
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.selectType {
  height: calc(100vh - 200px);
  background: url(../assets/images/tongyong.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 100px 140px;
  .contentBox {
    height: calc(100% - 80px);
    padding: 40px 20px;
    background-color: #ffffff;
    box-shadow: 35px 35px 50px 0px
      rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    .selectBox {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 100px;
      height: calc(100% - 50px);
      .item {
        color: #fff;
        width: 40%;
        height: 260px;
        line-height: 260px;
        text-align: center;
        border-radius: 10px;
        font-size: 26px;
        font-weight: 700;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
.selectType {
  .el-input {
    width: 200px;
    margin-right: 20px;
  }
  .el-divider--vertical {
    border-left: 0;
  }
  .el-page-header__title {
    .el-icon {
      padding: 4px;
      background: #2b82e7;
      color: #fff;
      border-radius: 50%;
    }
    .returnClass {
      font-size: 16px;
      font-weight: 700;
      margin-left: 10px;
      vertical-align: text-bottom;
    }
  }
}
</style>
